<fieldset class="layui-elem-field layui-field-title">
	<legend>用户列表</legend>
</fieldset>

<form class="layui-form">
	<div class="layui-inline">
		<label class="layui-form-label">姓名</label>
		<div class="layui-input-inline">
			<input type="text" name="name" placeholder="请输入搜索的姓名"
				class="layui-input">
		</div>
	</div>
	
	<div class="layui-inline">
		<label class="layui-form-label">身份证号</label>
		<div class="layui-input-inline">
			<input type="text" name="idcard" placeholder="请输入搜索的身份证号"
				class="layui-input">
		</div>
	</div>
	
	<div class="layui-inline">
		<label class="layui-form-label">电话</label>
		<div class="layui-input-inline">
			<input type="text" name="phone" placeholder="请输入搜索的电话号码"
				class="layui-input">
		</div>
	</div>
	
	<div class="layui-inline">
		<div class="layui-input-inline">
			<button class="layui-btn" lay-submit lay-filter="user-search">
				<i class="layui-icon layui-icon-search"></i>
			</button>
		</div>
	</div>
	
</form>

<!-- 操作按钮 -->
<script type="text/html" id="user-bar">
	{{# if(d.status==0){ }}
	<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="disable">禁用</a>
	{{# } else { }}
	<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="enable">启用</a>
	{{# } }}
	<a href="javascript:;" class="layui-btn layui-btn-sm " lay-event="edit">编辑</a>
</script>


<!-- 表格 -->
<table id="user-list" lay-filter="user-list"></table>

<script>
layui.use(['table', 'form'], function(){
	var table = layui.table,
	form = layui.form;
	
	//渲染表格
	table.render({
		elem: '#user-list',
		url: '/api/user/search',
		page: true,
		cols: [[
			{title: 'ID', field: 'id'},
			{title: '姓名', field: 'name'},
			{title: '身份证号', field: 'idcard'},
			{title: '电话', field: 'phone'},
			{title: '状态', field: 'status', templet: function(d){
				return ['正常', '禁用'][d.status];
			}},
			{title: '操作', toolbar: '#user-bar'}
		]],
		parseData: function(res){	//数据格式的转换
			return {code: res.code,
					msg: res.msg,
					count: res.data.total,	//总的记录数
					data: res.data.list,	//当前页面的记录
					};
		},
	});
	
	//表单提交
	form.on('submit(user-search)', function(data){
		
		//刷新表格
		table.reload('user-list', {
			where: data.field,	//将表单的内容作为参数传递到服务器
			page: {cur: 1},		//重新定位到第一页
		});
		
		return false;
	});
	
	//操作按钮
	table.on('tool(user-list)', function(obj){
		if(obj.event == 'disable'){
			layer.confirm('确定要禁用当前用户吗？', function(index){
				layer.close(index);
				$.ajax({
					url: '/api/user/edit',
					data: {id: obj.data.id, status: 1},
					type: 'post',
					dataType: 'json',
					success: function(result){
						if(result.code>0){
							//禁用成功
							layer.msg('禁用成功');
							//刷新表格
							table.reload('user-list');
						}else{
							layer.msg(result.msg);
						}
					},
					error: function(){
						layer.msg('请求失败');
					}
				});
			});
		}else if(obj.event == 'enable'){
			layer.confirm('确定要启用当前用户吗？', function(index){
				layer.close(index);
				$.ajax({
					url: '/api/user/edit',
					data: {id: obj.data.id, status: 0},
					type: 'post',
					dataType: 'json',
					success: function(result){
						if(result.code>0){
							//启用成功
							layer.msg('启用成功');
							//刷新表格
							table.reload('user-list');
						}else{
							layer.msg(result.msg);
						}
					},
					error: function(){
						layer.msg('请求失败');
					}
				});
			});
		}else if(obj.event == 'edit'){
			
			sessionStorage.setItem('user',JSON.stringify(obj.data));
			
			layer.open({
				type: 2,		//弹出一个iframe层
				title: '编辑用户',//标题
				area: ['500px','400px'],		//宽高
				content: '/user/edit.html',	//页面
				end: function(){
					//弹出层已经关闭
					//刷新表格
					table.reload("user-list");
				},
			});
		}
	});
});

</script>